<template>
  <div class="EmergencyList">
    <div class="flex location-wrap" v-if='FilledBy.systemXitong != "system"'>
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EmergencyResources' }">应急资源</el-breadcrumb-item>
        <el-breadcrumb-item>车辆台账</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" labelWidth="140px" :formData="formData"
        @node-click="deptChoose" @change="change" @handleTreeSelect="handleTreeSelect">
        <!-- <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
          <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :prop="item.id">
            <LsdForm :compData="item" :form="form" @node-click="deptChoose(arguments, item)" @change="change"
              @handleTreeSelect="handleTreeSelect" />
          </el-form-item>
        </el-form> -->
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" @select="handleSelectionChange" @select-all="handleSelectionChange"
        :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef"
        :actions="table.actions" ref="gjxm" :columns="table.columns" :title="table.title" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="close">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <DialogForm ref="formComponent" slot="slot1" :formConfig="formConfig" @handleNodeClick="handleNodeClickAssetsUnit"
          @changeEvent="handleChangecl" @handleInput="handleInput" />
        <DialogForm slot="slot2" ref="formComponent1" :formConfig="formConfig1" @handleNodeClick="handleNodeClick"
          @changeEvent="handleChange" />
        <DialogForm slot="slot3" ref="formComponent2" :formConfig="formConfig2" />
      </LsdDialogTitle>
    </LsdDialog>
    <!-- 导入 -->
    <LsdDialog :dialogConfig="dialogConfig1" @handleBtn="handleBtn1" @close="close1">
      <div class="updr" slot="dialog">请选择您要导入的数据文件:</div>
      <DialogForm slot="dialog" ref="formComponent3" @handleBeforeUpload="((file) => { handleBeforeUpload(file, 2); })"
        :formConfig="formConfig3">
        <div slot="upload" class="upload">
          <div class="upload" @click.prevent.stop="noPrevent">
            <el-input class="sjgy" v-model="fileListName" :disabled="true"></el-input>
          </div>
          <el-button slot="trigger" type="primary">浏览</el-button>
          <!-- <el-button slot="trigger" @click.stop="onExports">下载模板</el-button> -->
          <el-button @click.stop="clear">清除</el-button>
        </div>
      </DialogForm>
      <div class="updrs" slot="dialog" @click.stop="onExports">下载模板文件</div>
      <div class="promptText" slot="dialog">{{ prompt }}</div>
    </LsdDialog>
  </div>
</template>

<script>
import { formData } from "./comps/configVehicle";
import { vehicleListPage } from "@/api/EmergencyResources/EmergencyResources.js";
import { downVehicle, selectOrganizationDetailPCByidVo, saveBaseResourceVehicle, updByIdBaseResourceVehicle, selectLicence, doImportVehicleExcel, doSelectCascade, getDicListlargeCategory, baseResourceVehicleGetBetails, baseResourceVehicleGetDeleteById, baseResourceVehicleGetDderiveByIds } from "@/api/EmergencyResources/clzb.js";
import {
  // GetOrgTree
  getSubclassUntilList
} from "@/api/common.js";
import { getUnitTreeApi } from "@/api/EarlyWarningManagement/yjrb";
import { showTime } from "@/lib";
import common from "@/utils/common.js";
export default {
  data() {
    return {
      formData,
      form: {
      },
      table: {
        isSelectFlag: true, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "车辆台账列表",
        tableData: [],
        actions: [
          {
            id: "dialogVisible",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          },
          {
            id: "dialogLeadingIn",
            text: "导入",
            type: "",
            btnAttr: { size: "small" }
          },
          {
            id: "onExport",
            text: "导出",
            type: "",
            btnAttr: { size: "small" }
          }
        ],
        columns: [
          {
            prop: "unit",
            label: "所属单位",
            "min-width": "160px",
            "show-overflow-tooltip": true,
            align: "left"
          },
          {
            prop: "belongTeam",
            label: "所属队伍",
            align: "left"
          },
          {
            prop: "contractingUnit",
            label: "签约公司",
            align: "left"
          },
          {
            prop: "department",
            label: "所属部门",
            align: "left"
          },
          {
            prop: "vehicleProperties",
            label: "车辆性质",
            align: "left"
          },
          {
            prop: "vehicleUsage",
            label: "车辆用途",
            align: "left"
          },
          {
            prop: "vehicleType",
            label: "车辆类型",
            align: "left"
          },
          {
            prop: "vehicleNum",
            label: "车牌号码",
            align: "left"
          },
          {
            prop: "loadCapacity",
            label: "装载量",
            align: "left"
          },
          {
            prop: "driver",
            label: "司机姓名",
            align: "left"
          },
          {
            prop: "occupation",
            label: "工作状态",
            align: "left",
            render: (h, { row }) => {
              if (row.occupation == 0) {
                return (
                  <div>
                    {<span >
                      待命
                    </span>
                    }
                  </div>
                );
              } else if (row.occupation == 1) {
                return (
                  <div>
                    {<span >
                      已调配
                    </span>
                    }
                  </div>
                );
              }

            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "80px",
            render: (h, scope) => {
              var arr = [];
              if (this.FilledBy.systemXitong == "system") {
                arr = ["编辑", "删除"];
              } else {
                arr = [];
              }
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 2px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "380px",
          // height: "380px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
        // "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      activeNames: ["1", "2", "3", "4"],
      pageNum: 1,
      fileListName: "",
      // 弹窗信息
      dialogConfig: {
        title: "新增车辆",
        isShow: false,
        btnList: [
          {
            name: "保存",
            id: "submitForm", // 事件名
            size: "small",
            type: "primary"
          },
          {
            name: "取消",
            id: "getBack", // 事件名
            size: "small"
          }
        ]
      },
      // 弹窗信息
      dialogConfig1: {
        title: "数据导入",
        isShow: false,
        width: "60%",
        btnList: [
          {
            name: "导入数据",
            id: "Bsave", // 事件名
            size: "small",
            type: "primary"
          },
          {
            name: "取消",
            id: "getBacks", // 事件名
            size: "small"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "信息来源",
          name: "1",
          slot: "slot1"
        },
        {
          title: "关联信息",
          name: "2",
          slot: "slot2"
        },
        {
          title: "填报信息",
          name: "3",
          slot: "slot3"
        }
      ],
      formConfig: {
        // disabled: true,
        formData: [
          {
            type: "input",
            label: "车牌号码",
            class: "half",
            prop: "vehicleNum",
            lableWidth: "150px"
          },
          {
            type: "select",
            label: "车辆性质",
            prop: "vehiclePropertiesId",
            name: "vehicleProperties",
            class: "half",
            lableWidth: "150px",
            option: []
          },
          {
            type: "select",
            label: "车辆用途",
            prop: "vehicleUsageId",
            name: "vehicleUsage",
            class: "half",
            lableWidth: "150px",
            option: []
          },
          {
            type: "select",
            label: "车辆类型",
            prop: "vehicleType",
            name: "vehicleTypes",
            class: "half",
            lableWidth: "150px",
            option: []
          },
          {
            type: "input",
            label: "核定载客人数",
            prop: "approvedPassengers",
            class: "half",
            lableWidth: "150px"
          },
          {
            type: "selectTree",
            label: "固定资产单位",
            prop: "assetsUnit",
            name: "assetsUnitName",
            title: "固定资产单位选择",
            choose: false,
            isDisabled: false,
            multiple: false,
            keyWord: "keyWord",
            treeRef: "treeRef",
            commonClick: false,
            ref: "tree_select",
            class: "half",
            lableWidth: "150px",
            option: [],
            treeData: {
              data: [],
              default: ["1"],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          },
          {
            type: "select",
            label: "资产单位性质",
            prop: "unitNature",
            name: "unitNatures",
            class: "half",
            lableWidth: "150px",
            option: []
          },
          {
            type: "select",
            label: "车牌颜色",
            prop: "vehicleColor",
            name: "vehicleColors",
            class: "half",
            lableWidth: "150px",
            option: []
          },
          {
            type: "input",
            label: "车架号",
            prop: "chassisNumber",
            class: "half",
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "装载量",
            prop: "loadCapacity",
            class: "half",
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "品牌类型",
            prop: "brandType",
            class: "half",
            lableWidth: "150px"
          },
          {
            type: "select",
            label: "使用油料",
            prop: "useOil",
            name: "useOils",
            class: "half",
            lableWidth: "150px",
            option: []
          },
          {
            type: "input",
            label: "车辆驻地",
            prop: "vehicleLocation",
            class: "half",
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "行驶里程",
            prop: "mileage",
            class: "half",
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "驾驶员",
            prop: "driver",
            class: "half",
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "驾驶员联系方式",
            prop: "contact",
            class: "half",
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "固定资产编号",
            prop: "fixedAssetNo",
            class: "half",
            lableWidth: "150px"
          }
        ],
        rules: {
          approvedPassengers: [
            { required: true, message: "请输入核定载客人数", trigger: "change" }
          ],
          assetsUnit: [
            { required: true, message: "请选择固定资产单位", trigger: "blur" }
          ],
          contact: [
            { required: true, message: "请输入驾驶员联系方式", trigger: "change" }
          ],
          driver: [
            { required: true, message: "请输入驾驶员", trigger: "change" }
          ],
          loadCapacity: [
            { required: true, message: "请输入装载量", trigger: "change" }
          ],
          unitNature: [
            { required: true, message: "请选择资产单位性质", trigger: "blur" }
          ],
          useOil: [
            { required: true, message: "请选择使用油料", trigger: "blur" }
          ],
          // vehicleLocation: [
          //   { required: true, message: "请输入车辆驻地", trigger: "change" }
          // ],
          vehicleNum: [
            { required: true, message: "请输入车牌号", trigger: "change" }
          ],
          vehiclePropertiesId: [
            { required: true, message: "请选择车辆性质", trigger: "blur" }
          ],
          vehicleType: [
            { required: true, message: "请选择车辆类型", trigger: "blur" }
          ],
          vehicleUsageId: [
            { required: true, message: "请选择车辆用途", trigger: "blur" }
          ]
          // vehicleColor: [
          //   { required: true, message: "请选择车牌颜色", trigger: "blur" }
          // ],
        }
      },
      formConfig1: {
        formData: [
          {
            type: "selectTree",
            label: "所属单位",
            prop: "unit",
            name: "unitId",
            title: "所属单位选择",
            choose: false,
            isDisabled: false,
            multiple: false,
            keyWord: "keyWord",
            treeRef: "treeRef",
            commonClick: false,
            ref: "tree_select",
            class: "half",
            lableWidth: "150px",
            option: [],
            treeData: {
              data: [],
              default: ["1"],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          },
          {
            type: "select",
            label: "所属部门",
            prop: "departmentId",
            name: "department",
            class: "half",
            lableWidth: "150px",
            option: []
          },
          {
            type: "select",
            label: "所属班组",
            prop: "belongTeamId",
            name: "belongTeam",
            class: "half",
            lableWidth: "150px",
            option: []
          }
        ],
        rules: {
          unit: [{ required: true, message: "请选择所属单位", trigger: "blur" }]
        }

      },
      formConfig2: {
        formData: [
          {
            type: "input",
            label: "创建人",
            prop: "creator",
            isDisabled: true,
            class: "third",
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "creatorUnit",
            class: "third",
            isDisabled: true,
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "创建时间",
            prop: "createTime",
            isDisabled: true,
            class: "third",
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "最后一次填报人",
            prop: "modifier",
            isDisabled: true,
            class: "third",
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "modifyUnit",
            class: "third",
            isDisabled: true,
            lableWidth: "150px"
          },
          {
            type: "input",
            label: "最后更新时间",
            prop: "modifyTime",
            isDisabled: true,
            class: "third",
            lableWidth: "150px"
          }
        ]
      },
      formConfig3: {
        formData: [
          {
            type: "upload",
            label: "",
            prop: "ztqks",
            slot: "upload",
            action: "#",
            accept: "*",
            class: "sjgy",
            customize: true,
            tip: "温馨提示：请选择以.xlsx为后缀名的文件！",
            limit: 1,
            lableWidth: "130px"
          }
        ]
      },
      FilledBy: {},
      multipleSelection: [],
      type: 0,
      id: "",
      prompt: "",
      PromptVerification: "",
      promptCode: 0,
      vehicleNum: []
    };
  },
  mounted() {
    this.query();
    // GetOrgTree().then(res => {
    //   this.formData[0].treeData.attrs.data = res;
    //   this.formData[1].treeData.attrs.data = res;
    // });
    getSubclassUntilList({ orgId: "1533835007229984" }).then(res => {
      this.formData[0].treeData.attrs.data = res;
      // this.formData[1].treeData.attrs.data = res;
    });
    this.formData.map(item => {
      if (item.label === "车辆性质") {
        getDicListlargeCategory({ code: "yz_cl_clxz" }).then(res => {
          item.options = res.map((item) => {
            return {
              label: item.dicName,
              value: item.id
            };
          });
        });
      } else if (item.label === "工作状态") {
        getDicListlargeCategory({ code: "dic_clzt" }).then(res => {
          item.options = res.map((item) => {
            return {
              label: item.dicName,
              value: item.sort
            };
          });
        });
      }
    });

    const FilledBy = {
      systemXitong: JSON.parse(sessionStorage.getItem("role")).roleCode,
      creator: JSON.parse(sessionStorage.getItem("account")).realName,
      creatorId: JSON.parse(sessionStorage.getItem("account")).id,
      createDeptId: JSON.parse(sessionStorage.getItem("org")).orgCode,
      creatorUnit: sessionStorage.getItem("dwbmName"),
      createTime: showTime(new Date()),
      modifier: JSON.parse(sessionStorage.getItem("account")).realName,
      modifyTime: showTime(new Date()),
      modifyUnit: sessionStorage.getItem("dwbmName")
    };
    this.FilledBy = FilledBy;
    if (this.FilledBy.systemXitong != "system") {
      this.table.actions = [
        {
          id: "onExport",
          text: "导出",
          type: "",
          btnAttr: { size: "small" }
        }
      ];
    } else {
      this.table.actions = [
        {
          id: "dialogVisible",
          text: "新增",
          type: "primary",
          btnAttr: { size: "small" }
        },
        {
          id: "dialogLeadingIn",
          text: "导入",
          type: "",
          btnAttr: { size: "small" }
        },
        {
          id: "onExport",
          text: "导出",
          type: "",
          btnAttr: { size: "small" }
        }
      ];
    }
  },
  methods: {
    // 筛选条件根据车辆性质-用途-类型
    change(vale, item) {
      console.log(vale[0]);
      if (item.label === "车辆性质") {
        doSelectCascade({ pid: vale[0] }).then(res => {
          this.formData[4].options = res.map((item) => {
            return {
              label: item.dicName,
              value: item.id
            };
          });
        });
        console.log(item, "namenamename");
        const name = item.options.find(item => item.value === vale[0]);
        console.log(name, "namenamenamename");
        this.$set(this.form, "vehicleProperties", name.label);
        if (this.form.vehicleProperties) { // 每次重新选择大类清空小类和中类
          console.log(this.form.vehicleProperties, "this.form.vehicleProperties");
          this.$set(this.form, "vehicleUsage", "");
          this.$set(this.form, "vehicleType", "");
        }
      } else if (item.label === "车辆用途") {
        doSelectCascade({ pid: vale[0] }).then(res => {
          this.formData[5].options = res.map((item) => {
            return {
              label: item.dicName,
              value: item.id
            };
          });
        });
        const name = item.options.find(item => item.value === vale[0]); // 获取当前选中值得name
        this.$set(this.form, "vehicleUsage", name.label); // 获取name传给后端
        if (this.form.vehicleUsage) {
          this.$set(this.form, "vehicleType", "");
        }
      } else if (item.label === "车辆类型") {
        const name = item.options.find(item => item.value === vale[0]);
        this.$set(this.form, "vehicleType", name.label);
      }
    },
    // 选择器
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 所属部门到所属班组
    handleChange(val, item) {
      console.log(val, item);
      if (item.label === "所属部门") {
        selectOrganizationDetailPCByidVo({ id: val }).then(res => {
          this.formConfig1.formData.forEach((item) => {
            if (item.label === "所属班组") {
              const option = res.map((item) => {
                return {
                  label: item.cityName,
                  value: item.id
                };
              });
              item.option = option;
            }
          });
          if (this.$refs.formComponent1.form.belongTeam) {
            this.$set(this.$refs.formComponent1.form, "belongTeam", "");
            this.$set(this.$refs.formComponent1.form, "belongTeamId", "");
          }
        });
      }
    },
    // 所属单位到所属部门
    handleNodeClick(data, node, item) {
      if (item.label === "所属单位") {
        this.$set(this.$refs.formComponent1.form, "unit", data.orgName);
        this.$set(this.$refs.formComponent1.form, "unitId", data.id);
        selectOrganizationDetailPCByidVo({ id: data.id }).then(res => {
          this.formConfig1.formData.forEach((item) => {
            if (item.label === "所属部门") {
              const option = res.map((item) => {
                return {
                  label: item.cityName,
                  value: item.id
                };
              });
              item.option = option;
            }
          });
          if (this.$refs.formComponent1.form.department) {
            this.$set(this.$refs.formComponent1.form, "department", "");
            this.$set(this.$refs.formComponent1.form, "departmentId", "");
            this.$set(this.$refs.formComponent1.form, "belongTeam", "");
            this.$set(this.$refs.formComponent1.form, "belongTeamId", "");
          }
        });
      }
    },
    // 固定资产单位选择
    handleNodeClickAssetsUnit(data, node, item) {
      if (item.label === "固定资产单位") {
        this.$set(this.$refs.formComponent.form, "assetsUnit", data.orgName);
        this.$set(this.$refs.formComponent.form, "assetsUnitName", data.id);
      }
    },
    // 根据性质查询用途查询类型
    handleChangecl(val, item) {
      if (item.label === "车辆性质") {
        doSelectCascade({ pid: val }).then(res => {
          this.formConfig.formData.forEach((item) => {
            if (item.label === "车辆用途") {
              const option = res.map((item) => {
                return {
                  label: item.dicName,
                  value: String(item.id)
                };
              });
              item.option = option;
            }
          });
          if (this.$refs.formComponent.form.vehicleUsage) {
            this.$set(this.$refs.formComponent.form, "vehicleUsage", "");
            this.$set(this.$refs.formComponent.form, "vehicleUsageId", "");
            this.$set(this.$refs.formComponent.form, "vehicleType", "");
            this.$set(this.$refs.formComponent.form, "vehicleTypes", "");
          }
        });
      } else if (item.label === "车辆用途") {
        doSelectCascade({ pid: val }).then(res => {
          this.formConfig.formData.forEach((item) => {
            if (item.label === "车辆类型") {
              const option = res.map((item) => {
                return {
                  label: item.dicName,
                  value: String(item.id)
                };
              });
              item.option = option;
            }
          });
          if (this.$refs.formComponent.form.vehicleType) {
            this.$set(this.$refs.formComponent.form, "vehicleType", "");
            this.$set(this.$refs.formComponent.form, "vehicleTypes", "");
          }
        });
      }
    },
    // 新增弹窗下拉框赋值
    getOrgTree() {
      selectLicence().then(res => {
        this.vehicleNum = res.map(item => {
          return item.vehicleNum;
        });
      });
      this.formConfig1.formData.forEach((item) => {
        // 树状 所属单位
        if (item.prop === "unit") {
          getUnitTreeApi().then(res => {
            item.treeData.data = res;
          });
        }
      });
      this.formConfig.formData.forEach((item) => {
        if (item.label === "车辆性质") {
          getDicListlargeCategory({ code: "yz_cl_clxz" }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: String(item.id)
              };
            });
            item.option = option;
          });
        } else if (item.label === "资产单位性质") {
          getDicListlargeCategory({ code: "yz_cl_zcdwxz" }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: String(item.id)
              };
            });
            item.option = option;
          });
        } else if (item.label === "车牌颜色") {
          getDicListlargeCategory({ code: "yz_cl_cpys" }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: String(item.id)
              };
            });
            item.option = option;
          });
        } else if (item.label === "使用油料") {
          getDicListlargeCategory({ code: "yz_cl_syyl" }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: String(item.id)
              };
            });
            item.option = option;
          });
        } else if (item.label === "固定资产单位") {
          getUnitTreeApi().then(res => {
            item.treeData.data = res;
          });
        }
      });
    },
    // 取消
    getBack() {
      this.$refs.formComponent.form = this.$refs.formComponent.$options.data().form;
      this.$refs.formComponent1.form = this.$refs.formComponent1.$options.data().form;
      this.$refs.formComponent2.form = this.$refs.formComponent2.$options.data().form;
      this.formConfig.formData.forEach((item) => {
        if (item.label === "车辆用途" || item.label === "车辆类型") {
          item.option = [];
        }
      });
      this.$nextTick(() => {
        this.$refs.formComponent.$refs.formInlines.clearValidate();
        this.$refs.formComponent1.$refs.formInlines.clearValidate();
        this.$refs.formComponent2.$refs.formInlines.clearValidate();
      });
      this.dialogConfig.isShow = false;
    },
    // 导入取消
    getBacks() {
      this.$refs.formComponent3.fileList = [];
      this.fileListName = "";
      this.prompt = "";
      this.$refs.formComponent3.form = this.$refs.formComponent3.$options.data().form;
      this.$nextTick(() => {
        this.$refs.formComponent3.$refs.formInlines.clearValidate();
      });
      this.dialogConfig1.isShow = false;
    },
    // 校验车牌是否存在
    handleInput(val, item) {
      console.log(val, item);
      if (item.label === "车牌号码") {
        if (this.vehicleNum.includes(val)) {
          this.$set(this.$refs.formComponent.form, "vehicleNum", "");
          this.$message({
            message: "车牌号码已存在",
            type: "error"
          });
        }
      }
    },
    // 提交
    submitForm() {
      this.$refs.formComponent.isValidate();
      this.$refs.formComponent1.isValidate();
      const flag = this.$refs.formComponent.flag;
      const flag1 = this.$refs.formComponent1.flag;
      if (flag && flag1) {
        const pamams = {
          approvedPassengers: this.$refs.formComponent.form.approvedPassengers,
          assetsUnit: this.$refs.formComponent.form.assetsUnit,
          belongTeam: this.$refs.formComponent1.form.belongTeam,
          belongTeamId: this.$refs.formComponent1.form.belongTeamId,
          brandType: this.$refs.formComponent.form.brandType,
          chassisNumber: this.$refs.formComponent.form.chassisNumber,
          contact: this.$refs.formComponent2.form.contact,
          createTime: "",
          creator: this.$refs.formComponent.form.creator,
          creatorId: "",
          creatorUnit: this.$refs.formComponent2.form.creatorUnit,
          department: this.$refs.formComponent1.form.department,
          departmentId: this.$refs.formComponent1.form.departmentId,
          driver: this.$refs.formComponent.form.driver,
          fixedAssetNo: this.$refs.formComponent.form.fixedAssetNo,
          loadCapacity: this.$refs.formComponent.form.loadCapacity,
          mileage: this.$refs.formComponent.form.mileage,
          unit: this.$refs.formComponent1.form.unit,
          unitId: this.$refs.formComponent1.form.unitId,
          unitNature: this.$refs.formComponent.form.unitNatures,
          useOil: this.$refs.formComponent.form.useOils,
          vehicleColor: this.$refs.formComponent.form.vehicleColors,
          vehicleLocation: this.$refs.formComponent.form.vehicleLocation,
          vehicleNum: this.$refs.formComponent.form.vehicleNum,
          vehicleProperties: this.$refs.formComponent.form.vehicleProperties,
          vehiclePropertiesId: this.$refs.formComponent.form.vehiclePropertiesId,
          vehicleType: this.$refs.formComponent.form.vehicleTypes,
          vehicleUsage: this.$refs.formComponent.form.vehicleUsage,
          vehicleUsageId: this.$refs.formComponent.form.vehicleUsageId
        };
        if (this.type === 1) {
          pamams.modifier = JSON.parse(sessionStorage.getItem("account")).realName;
          pamams.modifyTime = this.FilledBy.createTime;
          pamams.modifyUnit = JSON.parse(sessionStorage.getItem("org")).orgName;
          saveBaseResourceVehicle(pamams).then(res => {
            if (res) {
              this.$message({
                message: "新增成功",
                type: "success"
              });
              this.query();
              this.dialogConfig.isShow = false;
            }

          });
        } else if (this.type === 2) {
          // pamams.modifier = JSON.parse(sessionStorage.getItem("account")).realName;
          // pamams.modifyTime = this.FilledBy.createTime;
          // pamams.modifyUnit = JSON.parse(sessionStorage.getItem("org")).orgName;
          pamams.id = this.id;
          updByIdBaseResourceVehicle(pamams).then(res => {
            if (res) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.query();
              this.dialogConfig.isShow = false;
            }
          });
        }
      }
    },
    // 分页
    handleSizeChange(val) {
      this.form["pageNum"] = val["current-page"];
      this.form["pageSize"] = val["page-size"];
      this.query();
    },
    // 筛选
    query() {
      delete this.form.unitId;
      vehicleListPage(this.form).then(res => {
        this.table.tableData = res.data;
        this.paginationAtrrs.total = res.total;
      });
    },
    // 列表表格按钮事件
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.HanEdit(scope.row);
      } else if (item === "删除") {
        this.detailForm(scope.row);
      }
    },
    reset() {
      this.form = this.$options.data().form;
      this.$refs.gjxm.paginationAtrrsInner["current-page"] = 1;
      this.query();
    },
    deptChoose(arg, item) {
      // if (item.elType === "lsdTree" && item.label === "所属单位") {
      //   console.log("触发");
      //   this.$set(this.form, item.id, arg[0].orgName);
      //   this.$set(this.form, item.id + "Id", arg[0].id);
      // }
      // this.$set(this.form, item.id, arg[0].orgName);
      // this.$set(this.form, item.id + "Id", arg[0].id);

    },
    handleTreeSelect(value) {
      const orgName = value[0].map(item => { return item.orgName; });
      const id = value[0].map(item => { return item.id; });
      this.$set(this.form, "unitIds", id.splice(","));
      this.$set(this.form, "unitId", orgName.splice(","));
    },
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    handleBtn(item) {
      this[item.id]();
    },
    handleBtn1(item) {
      this[item.id]();
    },
    // 清除导入模板得内容
    clear() {
      this.$refs.formComponent3.fileList = [];
      this.fileListName = "";
      this.prompt = "";
      this.$refs.formComponent3.form = this.$refs.formComponent3.$options.data().form;
      this.$nextTick(() => {
        this.$refs.formComponent3.$refs.formInlines.clearValidate();
      });
    },
    // 下载模板
    onExports() {
      downVehicle().then(res => {
        common.downloadByBlob(res, `车辆台账模板${new Date().getTime()}.xlsx`);
      });
    },
    // 去掉字符串大括号
    removeBlock(str) {
      if (str) {
        var reg = /^\{/gi;
        var reg2 = /\}$/gi;
        str = str.replace(reg, "");
        str = str.replace(reg2, "");
        return str;
      } else {
        return str;
      }
    },
    // 导入模板
    handleBeforeUpload(file, val) {
      this.file = file;
      doImportVehicleExcel(this.common.convertFormData({ multipartFile: file })).then(res => {
        res.text().then(data => {
          // data：指成功读取到的内容
          const datas = JSON.parse(data);
          this.promptCode = datas.code;
          this.PromptVerification = datas.data;
          if (datas.code === 200 && datas.data !== "{}") {
            // this.prompt = this.removeBlock(datas.data);
          } else if (datas.data === "{}") {
            console.log(";;;;");
          }
        }).catch(err => {
          // err： 指读取失败后返回的错误内容
        });
      });
      this.$nextTick(() => {
        this.$refs.formComponent3.form.ztqks = file.name;
        this.fileListName = file.name;
      });
    },
    // 导入数据按钮
    Bsave() {
      if (this.PromptVerification === "{}" && this.promptCode === 200) {
        this.$message({
          message: "导入成功",
          type: "success"
        });
        this.query();
        this.dialogConfig1.isShow = false;
      } else if (this.PromptVerification !== "{}" && this.promptCode === 200) {
        this.$message({
          message: "导入模板数据不正确,请根据提示进行修改",
          type: "error"
        });
      } else if (this.promptCode === -1) {
        this.$message({
          message: "系统异常,请联系管理员",
          type: "error"
        });
      } else {
        this.$message({
          message: "请选择模板",
          type: "error"
        });
      }
    },
    // 新增
    dialogVisible() {
      this.dialogConfig.isShow = true;
      this.type = 1;
      this.$nextTick(() => {
        this.$refs.formComponent2.form = this.FilledBy;
      });
      this.getOrgTree();
    },
    // 编辑
    HanEdit(val) {
      this.dialogConfig.isShow = true;
      this.type = 2;
      this.getOrgTree();
      baseResourceVehicleGetBetails({ id: val.id }).then(res => {
        this.id = res.id;
        this.$set(this.$refs.formComponent2.form, "modifier", res.modifier || JSON.parse(sessionStorage.getItem("account")).realName);
        this.$set(this.$refs.formComponent2.form, "modifyTime", res.modifyTime || this.FilledBy.createTime);
        this.$set(this.$refs.formComponent2.form, "modifyUnit", res.modifyUnit || JSON.parse(sessionStorage.getItem("org")).orgName);
        if (res.unitId) {
          selectOrganizationDetailPCByidVo({ id: res.unitId }).then(data => {
            this.formConfig1.formData.forEach((item) => {
              if (item.label === "所属部门") {
                const option = data.map((item) => {
                  return {
                    label: item.cityName,
                    value: item.id
                  };
                });
                item.option = option;
              }
            });
          });
        }
        if (res.departmentId) {
          selectOrganizationDetailPCByidVo({ id: res.departmentId }).then(data => {
            this.formConfig1.formData.forEach((item) => {
              if (item.label === "所属班组") {
                const option = data.map((item) => {
                  return {
                    label: item.cityName,
                    value: item.id
                  };
                });
                item.option = option;
              }
            });
          });
        }
        if (res.vehiclePropertiesId) {
          doSelectCascade({ pid: res.vehiclePropertiesId }).then(data => {
            this.formConfig.formData.forEach((item) => {
              if (item.label === "车辆用途") {
                const option = data.map((item) => {
                  return {
                    label: item.dicName,
                    value: String(item.id)
                  };
                });
                item.option = option;
              }
            });
          });
        }
        if (res.vehicleUsageId) {
          doSelectCascade({ pid: res.vehicleUsageId }).then(data => {
            this.formConfig.formData.forEach((item) => {
              if (item.label === "车辆类型") {
                const option = data.map((item) => {
                  return {
                    label: item.dicName,
                    value: String(item.id)
                  };
                });
                item.option = option;
              }
            });
          });
        }
        this.$refs.formComponent.form = res;
        this.$refs.formComponent1.form = res;
        this.$refs.formComponent2.form = res;
      });
    },
    // 导入
    dialogLeadingIn() {
      this.dialogConfig1.isShow = true;
    },
    // 导出操作
    onExport() {
      if (this.multipleSelection.length <= 0) {
        this.$message({
          message: "请至少选择一条数据",
          type: "warning"
        });
      } else if (this.multipleSelection.length >= 1) {
        const arr = [];
        this.multipleSelection.map((item, index) => {
          arr.push(item.id);
        });
        baseResourceVehicleGetDderiveByIds(arr).then(res => {
          if (res) {
            common.downloadByBlob(res, `车辆台账${new Date().getTime()}.xlsx`);
            this.$message({
              message: "导出成功",
              type: "success"
            });
          }
        });
      }
    },
    // 删除
    detailForm(val) {
      console.log(val.id);
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        baseResourceVehicleGetDeleteById({ id: val.id }).then(data => {
          if (data) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.query();
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    close() {
      this.getBack();
    },
    close1() {
      this.$refs.formComponent3.fileList = [];
      this.fileListName = "";
      this.prompt = "";
      this.$refs.formComponent3.form = this.$refs.formComponent3.$options.data().form;
      this.$nextTick(() => {
        this.$refs.formComponent3.$refs.formInlines.clearValidate();
      });
      this.dialogConfig1.isShow = false;
    }
  }
};

</script>

<style lang='less' scoped>
@import "../../assets/style/common.less";
@import "../../assets/style/ComponentStyle.less";
@import "../../assets/style/pop-upNotification.less";

.upload {
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: 10px;

  :deep(.el-input__inner) {
    width: 98%;
    color: rgb(10, 99, 241);
    text-decoration: underline;
  }

  :deep(.el-button) {
    padding: 9px 15px !important;
  }
}

:deep(.el-upload__tip) {
  font-size: 15px;
  color: red;
  margin: 10px 0;
  margin-left: 19px;
}

:deep(.el-dialog__body) {
  position: relative;
}

.updr {
  font-weight: 700;
  font-style: normal;
  color: #555555;
  font-size: 20px;
  text-indent: 19px;
  margin: 10px 0;
}

:deep(.el-upload-list__item-name) {
  margin-left: 16px;
}

.updrs {
  font-style: normal;
  color: #1723c4;
  font-size: 15px;
  text-indent: 19px;
  width: 110px;
  position: absolute;
  text-decoration: underline;
  cursor: pointer;
  top: 112px;
  left: 300px;
}

.promptText {
  margin-left: 19px;
  font-size: 15px;
  color: red;
  // text-indent: 19px;
}

:deep(.el-upload) {
  width: 100% !important;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-descriptions-item__label:not(.is-bordered-label)) {
  margin-right: 5px;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

:deep(.el-form-item__label) {
  font-size: 16px;
}

.doc-box {
  border: 1px solid #d9d9d9;
  padding: 20px 0 10px 0;
  // max-height: 570px;
  // overflow-y: auto;

  .doc-item {
    position: relative;
    padding: 10px 5px 0 5px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid #d7d7d7;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 30%;
      z-index: 1;
    }

    .checkbox {
      position: absolute;
      right: 10px;
      top: 5px;
      zoom: 200%;
    }

    :deep(.el-descriptions :not(.is-bordered) .el-descriptions-item__cell) {
      padding-bottom: 4px;
    }

    :deep(.el-descriptions__body) {
      background-color: transparent;
    }

    .doc-img {
      width: 80px;
      height: 80px;
      vertical-align: middle;
      margin-bottom: 5px;
    }

    :deep(.doc-label) {
      width: 60px;
      justify-content: flex-end;
    }

    :deep(.el-checkbox__inner::after) {
      border-color: #3270ff;
    }

    :deep(.el-checkbox__inner) {
      border-color: #3270ff;
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #fff;
    }
  }

  .active-doc {
    background-color: #fff;
    border-color: #3270ff;

    // :deep(.el-descriptions__body) {
    //   color: #3270ff;
    // }
  }
}

.fm-box {
  display: flex;

  .fm-img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }

  .fm-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 160px;
    color: #606266;

    .upload-btn {
      position: relative;
      width: 114px;
      cursor: pointer;

      &:hover {
        :deep(.el-button) {
          border-color: #409eff;
        }
      }

      #fm-btn {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        width: 114px;
        height: 36px;
        z-index: 1;
      }

      :deep(.el-button) {
        padding: 9px 40px;
        font-size: 16px;

        span {
          text-decoration: underline;
          color: #3270ff;
        }
      }
    }
  }
}

/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
  font-size: 26px;
  position: relative;
  top: 8px;
}

/deep/.el-button--small {
  font-size: 16px;
}

/deep/.el-button--mini {
  font-size: 16px;
}

/deep/.fileLevel .el-select-dropdown__item {
  padding-left: 20px;
}
</style>

